import React, { Component } from 'react'
import { Row, Col } from "antd";
import {
    SafetyCertificateOutlined
} from '@ant-design/icons';

import titlePath from '../../../../assets/image/three.png'

class ThreePlant extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: []
        }
    }
    render() {
        return (
            <div>
                <Row gutter={[{ xs: 4, sm: 4, md: 4, lg: 8 }, 4]} className="four-plate">
                    <Col xs={24} sm={24} md={24} lg={8}>
                        <div>
                            <div className='four-plate-title'>
                                <span>
                                    <img src={titlePath} />12万吨/年产聚乙烯乙炔气柜01
                                    <sub>正常</sub>
                                </span>
                            </div>
                            <div className='four-plate-content'>
                                <div className='content-up'>
                                    <span>安全仪表信息：</span>
                                    <span>启用状态<sub>停用</sub></span>
                                    <span>总回路数<sub>0路</sub></span>
                                    <span>回路旁路数<sub>0路</sub></span>
                                </div>
                                <Row gutter={[{ xs: 4, sm: 4, md: 8, lg: 8 }, 4]} className='content-down'>
                                    <Col xs={7} sm={7} md={7} lg={7}>
                                        <div><span>关键安全参数：</span></div>
                                    </Col>
                                    <Col xs={17} sm={17} md={17} lg={17}>
                                        <Row gutter={8, 8} className='content-down-text'>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col >
                                        </Row>
                                        <Row gutter={8, 8} className='content-down-text mt'>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col >
                                        </Row>
                                    </Col>
                                </Row>
                            </div>
                        </div>
                    </Col>
                    <Col xs={24} sm={24} md={24} lg={8}>
                        <div>
                            <div className='four-plate-title'>
                                <span>
                                    <img src={titlePath} />12万吨/年产聚乙烯乙炔气柜01
                                    <sub>正常</sub>
                                </span>
                            </div>
                            <div className='four-plate-content'>
                                <div className='content-up'>
                                    <span>安全仪表信息：</span>
                                    <span>启用状态<sub>停用</sub></span>
                                    <span>总回路数<sub>0路</sub></span>
                                    <span>回路旁路数<sub>0路</sub></span>
                                </div>
                                <Row gutter={[{ xs: 4, sm: 4, md: 8, lg: 8 }, 4]} className='content-down'>
                                    <Col xs={7} sm={7} md={7} lg={7}>
                                        <div><span>关键安全参数：</span></div>
                                    </Col>
                                    <Col xs={17} sm={17} md={17} lg={17}>
                                        <Row gutter={[8, 8]} className='content-down-text'>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col >
                                        </Row>
                                        <Row gutter={8, 8} className='content-down-text mt'>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col >
                                        </Row>
                                    </Col>
                                </Row>
                            </div>
                        </div>
                    </Col>
                    <Col xs={24} sm={24} md={24} lg={8}>
                        <div>
                            <div className='four-plate-title'>
                                <span>
                                    <img src={titlePath} />12万吨/年产聚乙烯乙炔气柜01
                                    <sub>正常</sub>
                                </span>
                            </div>
                            <div className='four-plate-content'>
                                <div className='content-up'>
                                    <span>安全仪表信息：</span>
                                    <span>启用状态<sub>停用</sub></span>
                                    <span>总回路数<sub>0路</sub></span>
                                    <span>回路旁路数<sub>0路</sub></span>
                                </div>
                                <Row gutter={[{ xs: 4, sm: 4, md: 8, lg: 8 }, 4]} className='content-down'>
                                    <Col xs={7} sm={7} md={7} lg={7}>
                                        <div><span>关键安全参数：</span></div>
                                    </Col>
                                    <Col xs={17} sm={17} md={17} lg={17}>
                                        <Row gutter={8, 8} className='content-down-text'>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col >
                                        </Row>
                                        <Row gutter={8, 8} className='content-down-text mt'>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col >
                                        </Row>
                                    </Col>
                                </Row>
                            </div>
                        </div>
                    </Col>
                    <Col xs={24} sm={24} md={24} lg={8}>
                        <div>
                            <div className='four-plate-title'>
                                <span>
                                    <img src={titlePath} />12万吨/年产聚乙烯乙炔气柜01
                                    <sub>正常</sub>
                                </span>
                            </div>
                            <div className='four-plate-content'>
                                <div className='content-up'>
                                    <span>安全仪表信息：</span>
                                    <span>启用状态<sub>停用</sub></span>
                                    <span>总回路数<sub>0路</sub></span>
                                    <span>回路旁路数<sub>0路</sub></span>
                                </div>
                                <Row gutter={[{ xs: 4, sm: 4, md: 8, lg: 8 }, 4]} className='content-down'>
                                    <Col xs={7} sm={7} md={7} lg={7}>
                                        <div><span>关键安全参数：</span></div>
                                    </Col>
                                    <Col xs={17} sm={17} md={17} lg={17}>
                                        <Row gutter={8, 8} className='content-down-text'>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col >
                                        </Row>
                                        <Row gutter={8, 8} className='content-down-text mt'>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col >
                                        </Row>
                                    </Col>
                                </Row>
                            </div>
                        </div>
                    </Col>
                    <Col xs={24} sm={24} md={24} lg={8}>
                        <div>
                            <div className='four-plate-title'>
                                <span>
                                    <img src={titlePath} />12万吨/年产聚乙烯乙炔气柜01
                                    <sub>正常</sub>
                                </span>
                            </div>
                            <div className='four-plate-content'>
                                <div className='content-up'>
                                    <span>安全仪表信息：</span>
                                    <span>启用状态<sub>停用</sub></span>
                                    <span>总回路数<sub>0路</sub></span>
                                    <span>回路旁路数<sub>0路</sub></span>
                                </div>
                                <Row gutter={[{ xs: 4, sm: 4, md: 8, lg: 8 }, 4]} className='content-down'>
                                    <Col xs={7} sm={7} md={7} lg={7}>
                                        <div><span>关键安全参数：</span></div>
                                    </Col>
                                    <Col xs={17} sm={17} md={17} lg={17}>
                                        <Row gutter={[8, 8]} className='content-down-text'>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col >
                                        </Row>
                                        <Row gutter={8, 8} className='content-down-text mt'>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col >
                                        </Row>
                                    </Col>
                                </Row>
                            </div>
                        </div>
                    </Col>
                    <Col xs={24} sm={24} md={24} lg={8}>
                        <div>
                            <div className='four-plate-title'>
                                <span>
                                    <img src={titlePath} />12万吨/年产聚乙烯乙炔气柜01
                                    <sub>正常</sub>
                                </span>
                            </div>
                            <div className='four-plate-content'>
                                <div className='content-up'>
                                    <span>安全仪表信息：</span>
                                    <span>启用状态<sub>停用</sub></span>
                                    <span>总回路数<sub>0路</sub></span>
                                    <span>回路旁路数<sub>0路</sub></span>
                                </div>
                                <Row gutter={[{ xs: 4, sm: 4, md: 8, lg: 8 }, 4]} className='content-down'>
                                    <Col xs={7} sm={7} md={7} lg={7}>
                                        <div><span>关键安全参数：</span></div>
                                    </Col>
                                    <Col xs={17} sm={17} md={17} lg={17}>
                                        <Row gutter={8, 8} className='content-down-text'>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col >
                                        </Row>
                                        <Row gutter={8, 8} className='content-down-text mt'>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col>
                                            <Col span={8}>
                                                <div>液位<span>4.531<sub>m</sub></span></div>
                                            </Col >
                                        </Row>
                                    </Col>
                                </Row>
                            </div>
                        </div>
                    </Col>
                </Row>
            </div>
        );
    }
}
export default ThreePlant